﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Touch Tool Strip</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 60px;
            margin-right: 12px;
            text-align:right;
        }

        input[type="button"],
        input[type="text"]{
            width: 160px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
    /*code_begin*/
    var spreadNS = GcSpread.Sheets;

    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 3 });
        initSpread(spread);
    });

    function initSpread(spread) {
        var sheet = spread.sheets[0];

        $("#addItem").click(function () {
            var name = $("#name").val();
            if (!name) {
                alert("Please input a name for toolbar item.")
            }
            var text = $("#text").val();
            var image = '' +
                    'YQUAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAABMklEQVRIS7XSMUpDQRDG8YCt' +
                    'FxDsbb1H4lW8wnt38BA2VmIfC0mhhYVVIJXybC0U0gibbx47w+zm290nPIsfbDY7/4GQRQjhX9HLOdHL' +
                    'OdHLOdFL5ut243UQMnI3fu/nkg81OhxDeVyNS/xc8qFGBmOAhb3OzyWRGhnMQkV+LonU/Dxt1yzG+Dk7' +
                    'bJ5fSrrtbrfGm7B/e6fBnDZFa0EHQXwMA55NWyI9VVtgcTVxSa9NUVpwFFeNJT1YU7AFxbgqLBnjrQXN' +
                    'uNIl+Hc9+nhtwVkeaYn/riSYswMGVnmg4ReufYyxAx5P/nngG64giTF2wOP7ONwywCXITBJj7IDHn8CC' +
                    '3iucwxgXPsbYAY97YFH1AKdgceFjjB3iQGnJDZxAEhc+xtDL3MXyLvyVzh7F5hUWB34T0LLVazuTAAAA' +
                    'AElFTkSuQmCC';
            var item = new spreadNS.TouchToolStripItem(name, text, image, function () {
                spread.touchToolStrip.close();
                alert("Runing clearing...");
            });
            spread.touchToolStrip.add(item);
        });

        $("#removeItem").click(function () {
            var name = $("#name").val();
            if (!name) {
                alert("Please input the name which item to be removed.");
            }
            spread.touchToolStrip.remove(name);
        })

        $("#clear").click(function () {
            spread.touchToolStrip.clear();
        })

        $("#addSeparator").click(function () {
            spread.touchToolStrip.add(new spreadNS.TouchToolStripSeparator());
        })

        $("#setFont").click(function () {
            var font = $("#font").val();
            if (!font) {
                alert("Please input a font for item text.");
            }
            var name = $("#name").val();
            var item = spread.touchToolStrip.getItem(name);
            item.font(font);
        })

        $("#setForeColor").click(function () {
            var foreColor = $("#color").val();
            if (!foreColor) {
                alert("Please input a color for item text.");
            }
            var name = $("#name").val();
            var item = spread.touchToolStrip.getItem(name);
            item.foreColor(foreColor);
        })
    };
    /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 340px; border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <span>Toolstrip Item</span>
            </div>
            <div class="option-row">
                <label for="name">Name:</label>
                <input type="text" id="name" value="demo_clear" />
            </div>
            <div class="option-row">
                <label for="text">Text:</label>
                <input type="text" id="text" value="clear" />
            </div>
            <div class="option-row">
                <input type="button" value="Add Item" id="addItem" class="toolbar-setting" />
                <input type="button" value="Add Separator" id="addSeparator" class="toolbar-setting" />
            </div>
            <br />
            <div class="option-row">
                <span>Toolstrip Item Style</span>
            </div>
            <div class="option-row">
                <input type="text" id="font" value="18px Arial" />
                <input type="button" id="setFont" value="Set Font" title="Set font for toolstrip item with specified name" />
            </div>
            <div class="option-row">
                <input type="text" id="color" value="red" />
                <input type="button" id="setForeColor" value="Set Fore Color"  title="Set fore color for toolstrip item with specified name" />
            </div>
            <br />
            <div class="option-row">
                <input type="button" value="Remove Toolstrip Item" id="removeItem" />
                <input type="button" value="Clear All Toolstrip Items" id="clear" />
            </div>
        </div>
    </div>
</body>
</html>
